<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no" />

    <style class="cp-pen-styles">
        * {
            margin: 0;
            padding: 0;
        }

        html,
        body {
            height: 100%;
            overflow: hidden;
        }
    </style>
</head>

<body>

    <button class="dianji1">暂停</button>
    <button class="dianji2">切换</button>

    <script src="https://cdn.bootcss.com/three.js/90/three.min.js"></script>
    <!-- <script src="/page/lib/OrbitControls.js"></script> -->
    <script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>
    <script src="https://cdn.bootcss.com/tween.js/17.2.0/Tween.js"></script>
    <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>

    <script>
        function init() {
            var ismobile = !1;

            /iPhone|iPad|iPod|Android/i.test(navigator.userAgent) ? ismobile = !0 : "";

            // 获取浏览器窗口的宽高，后续会用
            var width = window.innerWidth
            var height = window.innerHeight

            // 创建一个场景
            var scene = new THREE.Scene()

            // 创建一个具有透视效果的摄像机
            var camera = new THREE.PerspectiveCamera(45, width / height, 0.1, 1800)

            // 设置摄像机位置，并将其朝向场景中心
            camera.position.x = 10;
            camera.position.y = 100;
            camera.position.z = 800;
            camera.lookAt(scene.position)

            // 创建一个 WebGL 渲染器，Three.js 还提供 <canvas>, <svg>, CSS3D 渲染器。
            var renderer = new THREE.WebGLRenderer({
                antialias: true
            })

            // 设置渲染器的清除颜色（即绘制下一帧前填充的颜色）和输出的 canvas 的尺寸
            renderer.setClearColor(0xffffff)
            renderer.setSize(width, height)

            // 将渲染器的输出（此处是 canvas 元素）插入到 body
            document.body.appendChild(renderer.domElement)

            // 初始化摄像机插件（用于拖拽旋转摄像机，产生交互效果）
            var orbitControls = new THREE.OrbitControls(camera)

            orbitControls.enabled = 1;
            orbitControls.autoRotate = !1;
            orbitControls.autoRotateSpeed = 10; // 30 seconds per round when fps is 60



            //在网页上显示坐标系，其中坐标系的长度为6
            var axisHelper = new THREE.AxesHelper(200);
            // scene.add(axisHelper);

            var spriteMaterial = new THREE.SpriteMaterial({
                "color": new THREE.Color(0xffffff)
            })
            var spriteMaterial2 = new THREE.SpriteMaterial({
                map: program()
            })

            //画点
            function program() {
                var canvas = document.createElement('canvas');
                canvas.width = 64;
                canvas.height = 64;

                var context = canvas.getContext('2d');
                var gradient = context.createRadialGradient(canvas.width / 2, canvas.height / 2, 0, canvas.width / 2,
                    canvas.height / 2, canvas.width / 2);
                gradient.addColorStop(0, 'rgba(1,1,1,1)');
                gradient.addColorStop(.9, 'rgba(1,1,1,.9)');
                gradient.addColorStop(1, 'rgba(255,255,255,0)');

                context.fillStyle = gradient;
                context.fillRect(0, 0, canvas.width, canvas.height);

                var texture = new THREE.Texture(canvas);
                texture.needsUpdate = true;
                return texture;
            };

            // 循环创建多个 THREE.Sprite 对象，该对象始终面向摄像机
            // l粒子数
            var tween;
            var loader = new THREE.JSONLoader();
            var Djson = ["./mx/cpgame3.json",
                "./mx/cpac5.json",
                "./mx/cpbook2.json",
                "./mx/cpmovie4.json",
                "./mx/cpkv3.json",
                "./mx/qr.json"
            ];
            var numMX = 5;//模型总数

            var theSprite = [];

            var theArr = dianXinXi();
            // var theArr2 = dianXinXi(40);
            // console.log(theArr, theArr2)
            var loadMXRun;

            function loadMX(shu) {
                loader.load(Djson[shu], function (geometry, materials) {

                    // console.log("粒子2", geometry.vertices)

                    var theMXSprite = geometry.vertices;
                    console.log(theMXSprite.length)




                    // geometry.vertices.forEach(function(child, index) {
                    theSprite.forEach(function (child, index) {

                        // var sprite = new THREE.Sprite(spriteMaterial2)
                        // console.log(theArr[index].sprite.uuid== theArr2[index].sprite.uuid)
                        // console.log(index % theMXSprite.length)
                        // return;
                        var thisSprite = theMXSprite[index%theMXSprite.length]
                        var Tpoint = {
                            "point": child.sprite,
                            "x": theSprite[index].x,
                            "y": theSprite[index].y,
                            "z": theSprite[index].z
                        };
                        var Epoint = {
                            "x": thisSprite.x,
                            "y": thisSprite.y,
                            "z": thisSprite.z
                        };
                        theSprite[index].x = thisSprite.x
                        theSprite[index].y = thisSprite.y
                        theSprite[index].z = thisSprite.z

                        tween = new TWEEN.Tween(Tpoint)
                            .to(Epoint, 2000)
                            .delay(Math.random() * 500)
                            .easing(TWEEN.Easing.Quartic.Out)
                            .onUpdate(function (pp) {
                                // console.log(pp)
                                pp.point.position.addScaledVector(pp,100)
                                pp.point.position.set(pp.x * 200, pp.y * 200, pp.z * 200)

                                // pp.point.position.set(pp.x * 8, pp.y * 8, pp.z * 8)
                                scene.add(pp.point)
                            }).start();

                        // sprite.position.set(child.x * 200, child.y * 200, child.z * 200)
                        // sprite.scale.addScalar(ismobile?.8:.1)
                        // scene.add(sprite)

                        // if(geometry.vertices.length == index+1){
                        //     animate();
                        // }

                    })



                    // 异步执行
                    console.log("异步执行")

                    animate()

                });
            }

            loadMXRun = loadMX;
            loadMXRun(numMX);


            var mytime;

            function animate(time) {
                // 渲染，即摄像机拍下此刻的场景
                // renderer.render(scene, camera)
                // requestAnimationFrame(animate)
                orbitControls.update();

                renderer.render(scene, camera)
                // var id = requestAnimationFrame(animate);
                mytime = setTimeout(animate, 30);
                var result = TWEEN.update(time);

                // if (!result) cancelAnimationFrame(id);
            }

            $(".dianji1").click(function () {
                if ($(this).html() == "暂停") {
                    orbitControls.enabled = !1;
                    $(this).html("开始")
                } else {
                    orbitControls.enabled = 1;
                    $(this).html("暂停")

                }
            })

            $(".dianji2").click(function () {
                var loadMXRun2;
                // if ($(this).hasClass("theArr")) {
                //     loadMXRun2 = loadMX;
                //     loadMXRun(theArr);
                // } else {
                //     loadMXRun2 = loadMX;
                //     loadMXRun(theArr2);
                // }
                // $(this).toggleClass("theArr")


                loadMXRun2 = loadMX;
                loadMXRun((++numMX)%6);
                
            })





            function dianXinXi(siz) {
                console.log("dianXinXi")
                this.thisarr = [];
                siz ? '' : siz = 19;
                var xx = -1,
                    yy = 0,
                    zz = 0;
                for (var index = 0; index < 7524; index++) {
                    if (!theSprite[index]) {
                        var sprite = new THREE.Sprite(spriteMaterial2)
                        sprite.scale.addScalar(ismobile ? .8 : .1)

                        theSprite[index] = {
                            sprite: sprite,
                            x: 0,
                            y: 0,
                            z: 0

                        };
                    }

                    if (xx < siz) {
                        xx++;
                    } else {
                        xx = 0;
                        if (yy < siz) {
                            yy++;
                        } else {
                            yy = 0;
                            zz++;
                        }
                    }
                    thisarr.push({
                        sprite: theSprite[index].sprite,
                        x: xx - siz / 2,
                        y: yy - siz / 2,
                        z: zz - siz / 2
                    })

                }
                return this.thisarr;
            }
        }
        init();
    </script>
</body>

</html>